<template>
  <div class="hotel-item">
      <div v-if="!showdata">
            暂无符合要求的酒店
      </div>

     <div  v-else>
      <el-card v-for="(item) in getHotelData.data" :key="item.id">
          <el-row :gutter="10" align="middle">
              <el-col :span="9" @click.native="turnToHotelDetails(item.id)">
                  <img :src="item.photos" alt="">
              </el-col>
              <el-col :span="10">
                  <h1 @click="turnToHotelDetails(item.id)">{{item.name}}</h1>
                  <h3>{{item.alias}}</h3>
                  <span>
                        <i class="iconfont iconhuangguan"></i>
                        <i class="iconfont iconhuangguan"></i>
                        <i class="iconfont iconhuangguan"></i>
                        <span>经济型</span>
                  </span>
                <el-rate
                    v-model="item.stars"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
                </el-rate>
                <span>{{item.good_remarks}} 评价</span> <span>{{item.all_remarks}} 游记</span>
                    <div>
                        <i class="el-icon-location"></i>
                        <span>位于: {{item.address}}</span>
                    </div>
              </el-col>
              <el-col :span="5">
                  <div class="hotel-item-price" v-for="(item1,index) in item.products" :key="index"> {{item1.name}} <span>￥{{item.price}} <i>起</i> </span>  &gt;</div>
              </el-col>
          </el-row>
      </el-card>

     </div>

      <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="curPage"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="getHotelData.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'hotelItems',
  props: {
    hotelData: {
      type: Object,
      default: () => {
        return {
        }
      }
    }
  },
  data () {
    return {
      value: 4.0,
      getHotelData: [],
      curPage: 1,
      pagesize: 3,
      showdata: true
    }
  },
  create () {
  },
  methods: {
    serApi (word, turnOut, str) {
      if (word === undefined) {
        turnOut = ''
      } else {
        typeof (word) === 'string' ? turnOut =
      `&hotellevel_in=${+word}`
          : word.forEach(v => {
            turnOut += `&${str}=${v}`
          })
      }

      return turnOut
    },
    async getHotelItem () {
      const that = this
      const levelStr = ''
      const typeStr = ''
      const assetsStr = ''
      const brandsStr = ''
      const level = this.serApi(that.$route.query.hotellevel_in, levelStr, 'hotellevel_in')
      const type = this.serApi(that.$route.query.hoteltype_in, typeStr, 'hoteltype_in')
      const assets = this.serApi(that.$route.query.hotelasset_in, assetsStr, 'hotelasset')
      const brands = this.serApi(that.$route.query.hotelbrand_in, brandsStr, 'hotelbrand_in')
      // typeof (this.$route.query.hotellevel_in) === 'string' ? level =
      // `&hotellevel_in=${+this.$route.query.hotellevel_in}`
      //   : this.$route.query.hotellevel_in.forEach(v => {
      //     level += `&hotellevel_in=${v}`
      //     return level
      //   })

      // if (!this.$route.query.hoteltype_in) {
      //   return type
      // } else {
      //   this.$route.query.hoteltype_in.forEach(v => {
      //     type += `&hoteltype_in=${v}`
      //     return type
      //   })
      // }
      // if (!this.$route.query.hotelasset_in) {
      //   return assets
      // } else {
      //   this.$route.query.hotelasset_in.forEach(v => {
      //     assets += `&hotelasset=${v}`
      //     return assets
      //   })
      // }
      // if (!this.$route.query.hotelbrand_in) {
      //   return brands
      // } else {
      //   this.$route.query.hotelbrand_in.forEach(v => {
      //     brands += `&hotelbrand_in=${v}`
      //     return brands
      //   })
      // }
      const url = `/hotels?city=${this.hotelData.cityId}${level}${type}${assets}${brands}`
      const data = await this.$http.get(url, {
        params: {
          price_lt: this.$route.query.price_lt,
          _limit: this.pagesize,
          _start: this.pagesize * (this.curPage - 1)
        }
      })
      console.log(data)
      this.getHotelData = data.data
      this.$emit('hotelData', data.data.data)
    },
    handleSizeChange (size) {
      console.log(size)
      this.pagesize = size
      this.getHotelItem()
    },
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getHotelItem()
    },
    turnToHotelDetails (id) {
      console.log(id)
      this.$router.push({
        path: '/hotel/hotelDetail',
        query: { id: id }
      })
    }
  },
  mounted () {
    setTimeout(() => {
      this.getHotelItem()
    }, 500)
  },
  watch: {
    $route () {
      this.getHotelItem()
      this.curPage = 1
    },
    getHotelData (val) {
      console.log(val.data.length)
      if (val.data.length !== 0) {
        this.showdata = true
        this.getHotelData = val
      } else {
        this.showdata = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.hotel-item{
    width: 1000px;
    /deep/.el-card{
        height: 250px;
        width: 100%;
        margin: 20px 10px;
        .iconhuangguan{
          color: orange;
        }
        .el-card__body{
          height: 230px;
          .el-col{
            .hotel-item-price{
              position: relative;
              height: 40px;
              line-height: 40px;
              font-size: 13px;
              border-bottom: 1px gray solid;
              span{
                position: absolute;
                right: 0;
                color: orange;
                i{
                  color: #000;
                }
              }
              &:hover{
                background-color: #eee;
              }
            }
          }
        }
        h1{
          cursor: pointer;
        }
        img{
            width: 320px;
            height: 210px;
            cursor: pointer;
        }

    }
}
</style>
